/*
 * @Description: 真实性格式设置弹窗
 * @Author: Rfan
 * @Date: 2022-10-10 20:45:23
 * @LastEditTime: 2022-10-22 17:12:44
 */

import { useEffect, useState } from 'react';
import { Button, Checkbox, Form, Input, Popconfirm, Space } from 'antd';
// import { FormatDate, FormatNumber, FormatString, FormatTime } from './FormatComps';
import classnames from 'classnames/bind';
import { selectItemByKey } from '@/utils/list';
import { EnumCheckContentType, EnumFieldCheckType } from '../../../../../../../../dictionaries';
import { CheckCircleFilled } from '@ant-design/icons';
import type { IPropsRuleWithSetting } from '@/view/system/ArchivesDetection/interface';
import styles from '../../../../../styles/entryPanes.module.scss';

const cx = classnames.bind(styles);

interface IFieldFormatProps {
  data: any;
  onChange: any;
}

const FieldFormat = (props: IFieldFormatProps) => {
  const { data, onChange } = props;
  const [form] = Form.useForm();

  // icon显示状态
  const [iconState, setIconState] = useState(false);
  // 格式检测数据
  const [ruleData, setRuleData] = useState<IPropsRuleWithSetting<EnumFieldCheckType>>({
    ruleType: EnumFieldCheckType.Format,
    ruleValid: false,
    rule: {
      contentType: EnumCheckContentType.Regular,
      content: ''
    }
  });

  useEffect(() => {
    if (data?.rules) {
      const itemData = selectItemByKey(EnumFieldCheckType.Format, data.rules, 'ruleType');
      if (itemData && itemData.rule) {
        setRuleData(itemData);
        setIconState(!!itemData.rule.content);
        form.setFieldsValue(itemData.rule);
      }
    }
  }, [data]);

  // 设置表单数据
  const getFormData = () => {
    form.setFieldsValue(ruleData);
  };

  /**
   * @description: 复选框切换事件
   * @param {any} evt
   */
  const checkboxChange = (evt: any) => {
    onFinish({ ruleValid: evt.target.checked }, 'checkbox');
  };

  /**
   * @description: popover确认事件
   */
  const confirm = () => {
    form.submit();
  };

  /**
   * @description: 提交表单
   * @param {any} values
   * @param {'checkbox'} type
   */
  const onFinish = (values: any, type?: 'checkbox') => {
    const fieldRuleType = EnumFieldCheckType.Format;
    const rule = type === 'checkbox' ? ruleData.rule : { ...ruleData.rule, ...values };

    const editLengthObj = {
      ...ruleData,
      ruleValid: type === 'checkbox' ? values.ruleValid : ruleData.ruleValid,
      rule
    };

    onChange(data.key, fieldRuleType, editLengthObj);
    setIconState(!!rule.content);
  };

  const Content = () => {
    return (
      <Form form={form} onFinish={onFinish}>
        <Form.Item name="content">
          <Input.TextArea rows={2} placeholder="请填写正则表达式" />
        </Form.Item>
      </Form>
      // TODO: 暂时统一用正则
      // <Form
      //   labelCol={{ span: 6 }}
      //   wrapperCol={{ span: 14 }}
      //   preserve={false}
      //   form={form}
      //   onFinish={onFinish}
      // >
      //   {true && <FormatString />}
      //   {false && <FormatNumber />}
      //   {false && <FormatDate />}
      //   {false && <FormatTime />}
      // </Form>
    );
  };

  return (
    <Space size={2}>
      <Checkbox checked={ruleData.ruleValid} onChange={checkboxChange} />
      <div className={cx('btn-with-state')}>
        <Popconfirm title={<Content />} icon={null} onConfirm={confirm}>
          <Button
            type="link"
            size="small"
            onClick={() => {
              getFormData();
            }}
          >
            设置
          </Button>
        </Popconfirm>
        {iconState && <CheckCircleFilled className={cx('success')} />}
      </div>
    </Space>
  );
};

export default FieldFormat;
